<!--  ws 下的设备 list  -->
<template>
	<div>
		<el-card shadow="hover">
			<el-form :inline="true" :model="data.queryParams">
				<el-form-item label="设备编号">
					<el-input
						size="default"
						v-model="data.queryParams.deviceCode"
						placeholder="设备编号"
						clearable
						style="width: 200px"
						@change="filterDevice"
					/>
				</el-form-item>
				<el-form-item label="设备型号" v-if="roleIds.includes(1)">
					<el-select
						size="default"
						v-model.number="data.queryParams.deviceModel"
						clearable
						reserve-keyword
						placeholder="设备型号"
						style="width: 100px"
						@change="filterDeviceModel"
					>
						<el-option v-for="item in data.deviceModelOptions" :key="item.label" :label="item.label" :value="item.value" />
					</el-select>
				</el-form-item>

				<el-form-item label="" style="float: right; margin-right: 0">
					<el-button size="default" type="success" @click="fetch">刷新</el-button>
				</el-form-item>
			</el-form>

			<!-- list -->
			<el-table ref="table" :data="data.tableData.list" :border="true" size="default" highlight-current-row :fit="true" height="calc(100vh - 210px)">
				<el-table-column align="center" label="#" type="index" width="50px" :reserve-selection="true" />
				<el-table-column label="设备编号" align="left" prop="deviceCode">
					<template #default="{ row }">
						<div class="flex">
							<span>{{ row.deviceCode }}</span>
							<span class="length">{{ row.deviceCode.length }}</span>
						</div>
					</template>
				</el-table-column>
				<el-table-column label="设备型号" align="left" prop="deiceModel"></el-table-column>
				<el-table-column label="进入时间" align="left" prop="firstTime">
					<template #default="{ row }">
						<el-space>
							<span>{{ dayjs(row.firstTime * 1000).format('YYYY-MM-DD HH:mm:ss') }}</span>

							<el-text type="primary"
								>{{
									dayjs(row.firstTime * 1000)
										.locale('zh-cn')
										.fromNow()
								}}
							</el-text>
						</el-space>
					</template>
				</el-table-column>
				<el-table-column label="最近通讯" align="left" prop="platformId">
					<template #default="{ row }">
						<el-space>
							<span>{{ dayjs(row.heartbeatTime * 1000).format('YYYY-MM-DD HH:mm:ss') }}</span>
							<el-text type="primary"
								>{{
									dayjs(row.heartbeatTime * 1000)
										.locale('zh-cn')
										.fromNow()
								}}
							</el-text>
						</el-space>
					</template>
				</el-table-column>

				<el-table-column label="操作" column-key="operation"> </el-table-column>
			</el-table>

			<!-- 分页 -->
			<pagination
				v-show="data.tableData.total > 0"
				:total="data.tableData.total"
				v-model:page="data.queryParams.pageNum"
				v-model:limit="data.queryParams.pageSize"
				@pagination="fetch"
			/>
		</el-card>
	</div>
</template>

<script lang="ts" setup name="DeviceList">
import { reactive, onMounted, ref, watch, onUpdated } from 'vue';
import deviceApi from '/@/api/smoke/device';
import { useUserInfo } from '/@/stores/userInfo';
import { storeToRefs } from 'pinia';
import dayjs from 'dayjs';
import relativeTime from 'dayjs/plugin/relativeTime';
import 'dayjs/locale/zh-cn.js';

dayjs.extend(relativeTime);

const stores = useUserInfo();
const { userInfos, roleIds } = storeToRefs(stores);
let allDeviceList = <any>[];
const data = reactive({
	queryParams: {
		deviceModel: '',
		online: '',
		deviceCode: '', //设备机身编号
		pageNum: 1,
		pageSize: 10,
	},

	// 设备状态
	deviceModelOptions: [
		{
			value: '',
			label: '全部',
		},
		{
			value: 'M1',
			label: 'M1',
		},
		{
			value: 'M2',
			label: 'M2',
		},
		{
			value: 'M3',
			label: 'M3',
		},
	],

	radioOnline: [
		{ value: '', label: '全部' },
		{ value: '1', label: '在线' },
		{ value: '2', label: '离线' },
	],

	mapStatusData: [],

	//编辑弹窗

	dialog: {
		isVisible: false,
	},

	// 新增
	addVisible: false,

	selection: [],
	loading: false,
	tableData: {
		list: <any>[],
		total: 0,
	},
	curRow: <any>{},
});

onMounted(() => {
	fetch();
});

// 获取列表页数据
function fetch() {
	data.loading = true;

	deviceApi
		.getDeviceInWs()
		.then((res) => {
			allDeviceList = res.data.list;
			data.tableData = res.data;
			data.loading = false;
		})
		.finally(() => (data.loading = false));
}

// 过滤deviceCode
function filterDevice(deviceCode: string) {
	if (deviceCode.length > 0) {
		data.tableData.list = allDeviceList.filter((item: any) => {
			return item.deviceCode == deviceCode;
		});
	} else {
		fetch();
	}
}

// 过滤deviceCode
function filterDeviceModel(deviceModel: string) {
	if (deviceModel.length > 0) {
		data.tableData.list = allDeviceList.filter((item: any) => {
			return item.deiceModel == deviceModel;
		});
	} else {
		fetch();
	}
}
</script>
<style lang="scss" scoped>
.flex {
	display: flex;
	justify-content: space-between;

	.length {
		color: #cdd0d6;
	}
}

.address {
	line-height: 32px;
}
</style>
